<template>
  <div class="comment-item">
    <Row>
      <div class="left">
        <Avatar icon="person"/>
      </div>
      <div class="right">
        <div class="header">
          <div class="name">
            <h3>{{item.nickname}}</h3>
          </div>
          <div class="score">
            <Rate disabled allow-half v-model="item.score"></Rate>
          </div>
          <div class="created-on">
            {{new Date(item.createdOn * 1000).toLocaleString()}}
          </div>
        </div>
        <div class="mbody">
          <span>{{item.comment}}</span>
        </div>
      </div>
    </Row>
  </div>
</template>

<script>
  export default {
    name: "mcomment",
    props: ['item'],
    methods: {
      loadImage() {
        this.$axios({
          method: 'get',
          url: `/api/image/${this.item.image}`,
        }).then(res => {
          this.item['poster'] = res.data;
        });
      },
    }
  }
</script>

<style scoped>

  .comment-item {
    border: 1px #f1f1f1 solid;
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: 10px;
  }

  .left {
    float: left;
    margin-top: 5px;
    margin-right: 10px;
  }

  .right {
    width: 93%;
    display: inline-block;
  }

  .name {
    float: left;
    margin-right: 10px;
  }
  .score {
    display: inline-block;
    margin-top: -5px;
  }
  .created-on {
    float: right;
    margin-top: 3px;
  }
  .mbody {
    margin-top: 5px;
  }

</style>
